<div id="app" v-cloak>
    <div class="flex-row bottom10">
        <el-button @click="refresh">
            <el-icon :size="15"><Refresh /></el-icon>
        </el-button>
        <el-button type="primary" @click="handleAdd()">添加</el-button>
        <el-button type="danger" @click="event=>handleDels()" :disabled="selectables.length==0?true:false">删除</el-button>
    </div>
    <div class="flex-column flex-content-center flex-item-center">
        <el-table :data="listObj.list"
                  style="width: 100%"
                  :border="true"
                  max-height="680"
                  size="default"
                  @selection-change="event=>handleSelectionChange(event)"
                  :show-overflow-tooltip="true"
                  row-key="id"
        >
            <el-table-column fixed="left" type="selection" :selectable="selectable" width="55" ></el-table-column>
            <!--            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>-->
<!--            <el-table-column prop="title" label="规则名称" min-width="150" align="left"></el-table-column>-->
            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
            <el-table-column prop="username" label="账户名" min-width="150"  align="center"></el-table-column>
            <el-table-column prop="nickname" label="昵称" min-width="150"  align="center"></el-table-column>
            <el-table-column prop="avatar" label="头像" min-width="100" align="center">
                <template #default="scope">
                    <el-image :src="scope.row.avatar" style="width: 32px; height: 32px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column  label="分组" min-width="150"  align="center">
                <template #default="scope">
                    <div v-if="scope.row?.group_names">
                        <el-tag class="left5" v-for="tas in scope.row.group_names"  type="success">{{tas}}</el-tag>
                    </div>
                    <el-tag v-else  type="success">无</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" min-width="150"  align="center"></el-table-column>
<!--            <el-table-column prop="type" label="类型" min-width="150"  align="center">-->
<!--                <template #default="scope">-->
<!--                    <el-tag v-if="scope.row.type==`menu`" type="success">菜单</el-tag>-->
<!--                    <el-tag v-if="scope.row.type==`dir`" type="danger">目录</el-tag>-->
<!--                    <el-tag v-if="scope.row.type==`file`" type="warning">权限</el-tag>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="module" label="模块" min-width="150"  align="center"></el-table-column>-->
<!--            <el-table-column prop="route" label="路由" min-width="150" align="center"></el-table-column>-->
<!--            <el-table-column label="是否菜单" min-width="100" align="center">-->
<!--                <template #default="scope">-->
<!--                    <el-switch-->
<!--                            v-model="scope.row.ismenu"-->
<!--                            size="default"-->
<!--                            :active-value="1"-->
<!--                            :inactive-value="0"-->
<!--                            @change="event=>handleSwitchChange(scope.row,`ismenu`)"-->
<!--                    ></el-switch>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="weigh" label="权重" min-width="150" align="center"></el-table-column>-->
            <el-table-column label="状态" min-width="100" align="center">
                <template #default="scope">
                    <el-switch
                            v-model="scope.row.status"
                            size="default"
                            :disabled="scope.row.id==1?true:false"
                            :active-value="1"
                            :inactive-value="0"
                            @change="event=>handleSwitchChange(scope.row,`status`)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间" min-width="200" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button size="small" :disabled="scope.row.id==1?true:false" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" :disabled="scope.row.id==1?true:false" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="flex-row top20 flex-content-end" v-if="!(search?.form?.list_type&&search.form.list_type==`tree`)">
        <el-pagination
                background
                layout="total,sizes,prev, pager, next,jumper"
                :total="listObj.total"
                :page-size="listObj.limit"
                :page-sizes="[10, 20, 50, 100,500,1000]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</div>